<template>
    <div class="detail">
        <x-header :left-options="{backText: ''}">详情</x-header>
        <div class="newsMessage">
            <div class="newsTitle">{{infos.title}}</div>
            <div class="newsTime">
               <span class="time">{{infos.create_time | formatDate}}</span><span class="poster">{{infos.user_login}}</span><span class="party">{{infos.department}}</span> 
            </div>
            <div class="newsContent" v-html="realHtml">
            </div>
        </div>
    </div>
</template>

<script>
import { XHeader } from "vux";
import { mapGetters } from "vuex";
export default {
  components: {
    XHeader
  },
  computed: {
    ...mapGetters(["homeDetail"]),
  },
  created() {
    // this.$store.dispatch("getHomeDetail", {
    //   id: this.$route.params.newsid
    // });
  },
  activated() {
    this.$store.dispatch("getHomeDetail", {
      id: this.$route.params.newsid
    });
  },
  deactivated() {
    // this.infos = {};
  },
  watch: {
    homeDetail(Value) {
      this.infos = Value;
    },
    infos: function(val) {
      let htmlUtil = this.$options.filters.htmlUtil;
      this.realHtml = htmlUtil(val.thumb_content)
    }
  },
  data() {
    return {
      infos: {},
      // normalImg: require("./detail.png"),
      realHtml: ''
    };
  },
  filters: {
    htmlUtil: function(str) {
      let s = "";
      if (str.length == 0) return "";
      s = str.replace(/&amp;/g, "&");
      s = s.replace(/&lt;/g, "<");
      s = s.replace(/&gt;/g, ">");
      s = s.replace(/&nbsp;/g, " ");
      s = s.replace(/&#39;/g, "'");
      s = s.replace(/&quot;/g, '"');
      return s;
    }
  }
};
</script>

<style lang="less">
.detail {
  width: 100%;
  font-size: 0;
  .newsMessage {
    box-sizing: border-box;
    width: 100%;
    padding: 2.875rem 0.625rem 0;
    .newsTitle {
      padding: 1rem 0 0;
      font-size: 1.1875rem;
      color: rgb(0, 0, 0);
      font-weight: bold;
    }
    .newsTime {
      padding: 1.125rem 0 1.375rem;
      display: flex;
      .time {
        font-size: 0.875rem;
        color: rgb(153, 153, 153);
        margin-right: 2.125rem;
      }
      .poster {
        font-size: 0.875rem;
        color: rgb(153, 153, 153);
        margin-right: 1.5rem;
      }
      .party {
        font-size: 0.875rem;
        color: rgb(153, 153, 153);
      }
    }
    .newsImg {
      width: 100%;
      height: 11.1875rem;
      margin-bottom: 0.5rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .newsContent {
      font-size: 1rem!important;
      // text-indent: 2em;
      color: rgb(51, 51, 51);
      overflow: hidden;
      img{
        max-width: 100%!important;
      }
    }
  }
}
</style>